<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>工具</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="shortcut icon" href="../img/frog.svg" type="image/x-icon">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js">
    </script>

    <style>
        .box {
            display: flex;
            align-items: center
        }
        
        .panel-footer {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="row">
            <div class="col-xs-12  ">
                <div class="panel-group" v-for="item in tools" style=" background-color: #fff; margin:2%; " role="tablist " aria-multiselectable="true ">
                    <div class="panel panel-default ">
                        <div class="panel-heading " role="tab ">
                            <h4 class="panel-title ">
                                <a role="button " :href="item.url ">
                                    <div class="row page-header box ">
                                        <div class="col-xs-3 col-md-1 col-xs-offset-1 "><img :src='item.logo' class="img-responsive " alt="Responsive image "></div>
                                        <div class="col-xs-9 ">
                                            <h4>{{item.name}}</h4>
                                        </div>
                                    </div>
                                </a>
                            </h4>
                        </div>

                    </div>
                </div>



            </div>

        </div>



        <script src="../scripts/tools.js "></script>
</body>

</html>